<template>
	<view class="content u-flex-col">
		<!-- 自定义头部 -->
		<!-- <h-header :logo="homeData.config && homeData.config.app_logo"></h-header> -->
		<view class="px-p-t-20 px-p-b-20" @click="goNotic">
			<u-notice-bar type="none" :customIcon="true" customUrl="/static/images/home/BG-010.png"
				:volume-icon="false" color="#fff" mode="horizontal" :list="mesList"></u-notice-bar>
		</view>
		<view class="welcome px-p-30">
			<view class="px-font-24 u-font-bold">
				{{$t('home.txt1')}}
			</view>
			<view class="u-flex server"  style="float:right;top:50px;"  @click="openServe">
				<image src="/static/images/home/BG-02.png"  style="float:right;width:2rem;height:2rem;" mode=""></image>
				<!-- 온라인 고객서비스 -->
				{{$t('home.txt2')}}
			</view>
			
			<view class="user-info u-flex px-m-t-20 u-col-top">
				<view class="px-font-20">
					{{userInfo.username}}
				</view>
				<image class="level-icon px-m-l-20" :src="userInfo.level && userInfo.level.img" mode=""></image>
			</view>
			<!-- <view class="u-flex server" @click="openServe">
				<image class="level-icon px-m-l-20" src="/static/images/home/BG-02.png" mode=""></image>
				<view class="px-font-12 px-p-l-10">
					{{$t('home.txt2')}}
				</view>
			</view> -->
		</view>
		<!-- 金刚区 -->
		<view class="vajra-box px-p-30 u-flex u-row-between u-flex-wrap u-col-top">
			<view class="va-item" :class="{'px-m-t-60' : index > 3}" v-for="(item,index) in navList" :key="index" @click="jumpMenu(index)">
				<image :src="item.icon" mode=""></image>
				<view class="px-font-14">
					{{item.text}}
				</view>
			</view>
		</view>
		<!-- 等级 -->
		<view class="width-690 px-p-30 px-m-t-30 flex-self-center level-box">
			<view class="u-flex u-font-bold u-row-between">
				<view class="px-font-16">
					{{$t('home.txt11')}}
				</view>
				<view class="px-font-14 font-main u-flex" @click="goLevelDesc">
					<text class="px-m-r-10">{{$t('home.txt12')}}</text>
					<u-icon name="arrow-right" color="#00B6AF" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between px-m-t-20 level-img">
				<block v-for="(item,index) in homeData.vip_list" :key="index">
					<image class="px-p-10" :class="{'border-main-color':currentIndex == index}" :src="item.img" mode="" @click="switchLev(index)"></image>
				</block>
				
			</view>
			<view class="px-m-t-20 level-content">
				<view class="u-font-bold title px-font-16">
					{{currentLev.name}}
				</view>
				<view class="px-m-t-10 px-font-16">
					<rich-text :nodes="currentLev.node"></rich-text>
				</view>
			</view>
		</view>
		<view class="width-690 px-p-30 px-m-t-30 flex-self-center level-box">
		<view class="uni-title uni-common-mt">
						<text>{{$t('uinfo.txt37')}}</text>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo{item[0]}"  v-for="(item) in days"  @click="sign(item)"
					:class="[item[1]==1?'scroll-view-item_H uni-bg-red':'scroll-view-item_H uni-bg-red2']"  
					>
						<view class="scroll-border" style="font-size: 16rpx;">$</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">Day{{item[0]}}</view>
					</view>
					<!-- <view id="demo2" class="scroll-view-item_H uni-bg-red2">
						<view class="scroll-border" style="font-size: 16rpx;">2</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">3</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo4" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">4</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo5" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">5</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo6" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">6</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo7" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">7</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo8" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">8</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo9" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">9</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo10" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">10</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view>
					<view id="demo11" class="scroll-view-item_H uni-bg-blue">
						<view class="scroll-border" style="font-size: 16rpx;">11</view>
						<view  class="scroll-border2" style="font-size: 16rpx;">1days</view>
					</view> -->
					
				</scroll-view>
				
			</view>
			<view class="uni-common-pb"></view>
		</view>		
		<view class="fotter_box px-m-b-80">
			<view class="bottom-text px-font-14">
				{{$t('common.copyright')}}
			</view>
		</view>
		<!-- 内容弹窗 -->
		<u-popup mode="center" border-radius="12" v-model="showContentPop">
			<view class="pop-box">
				<view class="pop-title px-m-l-30 u-font-bold px-m-b-20 px-font-16">{{vuex_config.app_name}}</view>
				<view class="pop-type px-font-20 u-font-bold px-m-l-30">{{typTitle}}</view>
				<scroll-view class="height-450 width-630 px-p-30" scroll-y="true">
					<u-parse :html="popRichtxt"></u-parse>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 自定义弹窗 -->
		<view class="mask-pop" v-if="showPop">
			<view class="pop-cont" @click="lateUSDTage">
				<image class="img" :src="homeData.config && homeData.config.pop" mode=""></image>
				<image class="close" src="/static/images/home/close_green.png" mode="" @click.stop="closePop"></image>
			</view>
		</view>
		<!-- 自定义tabbar -->
		<h-tabbar></h-tabbar>
		
			<!-- <uni-fab ref="fab" :pattern="pattern"    vertical="bottom"  horizontal="right"
						direction="vertical"  @fabClick="tiaozhuan" /> -->
		
		
	</view>
</template>

<script>
	import hTabbar from "./components/h-tabbar/h-tabbar";
	import hHeader from "./components/h-header/h-header";
	export default {
		components: {
			hTabbar,
			hHeader
		},
		data() {
			return {
				/* 自定义弹窗展示标识 */
				showPop: false,
				mesList: [],
				pattern: {
					// color: '#7A7E83',
					// backgroundColor: '#fff',
					// selectedColor: '#007AFF',
					// buttonColor: '#007AFF',
					// iconColor: '#fff',
					icon:'gift-filled'
				},
				nodes:"Lợi nhuận 0,25% trên mỗi giao dịch",
				navList: [{
					icon: "/static/images/home/BG-07.png",
					text: this.$t('home.txt3')
				}, {
					icon: "/static/images/home/BG-012.png",
					text: this.$t('home.txt4')
				}, {
					icon: "/static/images/home/BG-011.png",
					text: this.$t('home.txt5')
				}, {
					icon: "/static/images/home/BG-018.png",
					text: this.$t('home.txt6')
				}, {
					icon: "/static/images/home/BG-017.png",
					text: this.$t('home.txt7')
				}, {
					icon: "/static/images/home/BG-015.png",
					text: this.$t('home.txt8')
				}, {
					icon: "/static/images/home/BG-016.png",
					text: this.$t('home.txt9')
				}, {
					icon: "/static/images/home/BG-019.png",
					text: this.$t('home.txt10')
				}],
				/* 富文本弹窗相关 */
				showContentPop:false,
				popRichtxt:"",
				typTitle:"",
				/* 用户信息 */
				userInfo:{},
				/* 首页数据 */
				homeData:{},
				currentLev:{},
				old: {
					scrollTop: 0
				},
				days:[],
				currentIndex:null
			}
		},
		onShow() {
			this.getHome();
			// this.getlist();
		},
		onHide() {
			this.$u.vuex('vuex_index_pop',false);
		},
		methods: {
			zh(value){
				if(value){
					return Math.round(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
				}
			},
			goNotic() {
				this.$u.route('/pages/noticList/noticList')
			},
			scroll(e) {
							console.log(e)
							this.old.scrollTop = e.detail.scrollTop
						},
			lateUSDTage(){
				let lates;
				lates = encodeURIComponent(JSON.stringify(this.homeData.config.event_list))
				this.$u.route('/pages/richText/lates',{lates})
			},
			scroll: function(e) {
							console.log(e)
							// this.old.scrollTop = e.detail.scrollTop
						},
			tiaozhuan(){
				
				
				this.$u.route('pages/userPages/userCenter/chouJiang')
			},
			// getlist(){
			// 	console.log(222)
			// 		 this.$u.api.getList().then(res => {
			// 		 	console.log(res.data[0].id)
			// 		 	// this.userInfo = res.data;
			// 		 })
			// },
			switchLev(i){
				this.currentIndex = i;
				this.homeData.vip_list.map((item,index)=>{
					if(index == i){
						this.currentLev = item
					}
				})
			},
			/* 打开客服 */
			async openServe() {
				let {
					data
				} = await this.$u.api.serverList();
				let action = data.map(item => item.name);
				uni.showActionSheet({
					itemList: action,
					success: function(res) {
						let url = data[res.tapIndex].val;
						// #ifdef APP-PLUS
						plus.runtime.openURL(url)
						// #endif
						// #ifdef H5
						window.open(url)
						// #endif
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			sign(item){
				if(item[1] != 1){
					return;
				}
				this.$u.api.sign().then(res => {
					
					// uni.showModal({
					//   content: '작업 성공',
					//   showCancel: false,
					//   complete: () => {
					    this.prizeing = false
					//   }
					// })
					this.getHome();
				})
			},
			/* 获取首页数据 */
			async getHome(){
				let user = await this.$u.api.userInfo();
				this.userInfo = user.data;
				this.days=user.data.days;
				this.days.forEach((item,index)=>{
					index = parseInt(index+1);
					if(user.data.sign_day >= index){
						item[1] = 1;
					}
				});
				this.$u.api.homeData().then(res => {
					let configObj = {
						app_name:res.data.config.app_name,
						operation_time:res.data.config.operation_time,
						withdraw_time:res.data.config.operation_time,
						app_logo: res.data.config.app_logo
					}
					this.$u.vuex('vuex_config',configObj);
					this.mesList = [res.data.config.tips]
					let  locyv=uni.getLocale();
					if(locyv=='zh-Hant'){
						this.mesList = [res.data.config.tips.tips_zh]
					}
					if(locyv=='en'){
						this.mesList = [res.data.config.tips.tips_en]
					}
					if(locyv=='hy'){
						this.mesList = [res.data.config.tips.tips_hy]
					}
					if(locyv=='jp'){
						this.mesList = [res.data.config.tips.tips_jp]
					}
					if(locyv=='fr'){
						this.mesList = [res.data.config.tips.tips_fr]
					}
					if(locyv == "trq"){
						this.mesList = [res.data.config.tips.tips_trq]
					}
					if(locyv == "yn"){
						this.mesList = [res.data.config.tips.tips_yn]
					}
					// console.log(res.data.config.tips.tips_fr)
					let levList = res.data.vip_list;
					// levList.map((item,index)=>{
					// 		let str1 = `<p><b>${item.order_rate_txt} profit per deal<br>
					// 		Maximum ${item.order_num} applications per set of data improvement<br>
					// 		Maximum of ${item.ring} sets of improvement tasks per day</b></p>`;
					// 		let str2 = `<p><b>Lợi nhuận ${item.order_rate_txt} trên mỗi giao dịch<br>
					// 		Có tối đa ${item.order_num} ứng dụng trên mỗi bộ cải tiến dữ liệu<br>
					// 		Tối đa ${item.ring} bộ nhiệm vụ cải tiến mỗi ngày</b></p>`;
					// 		let str3 = `<p><b>每筆交易 ${item.order_rate_txt} 利潤<br>
					// 		每組數據改進最多 ${item.order_num} 個應用<br>
					// 		每天最多 ${item.ring} 組改進任務</b></p>`;
					levList.map((item,index)=>{
							let str1 = `<p><b>${item.order_rate_txt} profit per deal<br>
							Maximum ${item.order_num} applications per set of data improvement<br>
							Activate with an IDR ${item.price} </b></p>`;
							let str2 = `<p><b>Lợi nhuận ${item.order_rate_txt} trên mỗi giao dịch<br>
							Có tối đa ${item.order_num} ứng dụng trên mỗi bộ cải tiến dữ liệu<br>
							Tối đa ${item.price} bộ nhiệm vụ cải tiến mỗi ngày</b></p>`;
							let str3 = `<p><b>每筆交易 ${item.order_rate_txt} 利潤<br>
							每組數據改進最多 ${item.order_num} 個應用<br>
							重置激活IDR$ ${item.price} </b></p>`;
							let str4 = `<p><b>거래당 ${item.order_rate_txt} 이익<br>
							각 데이터 세트가 가장 많이 개선되었습니다. ${item.order_num} 애플리케이션<br>
							활성화 재설정IDR$ ${item.price} </b></p>`;
						let str5 = `<p><b>アプリデータごとに利益は${item.order_rate_txt} です。<br>
								1セットに${item.order_num} 個のアプリケーションデータを集めて最適化します。<br>
									アクティブレベル:${item.price} IDR</b></p>`;	
								let str6 = `<p><b>par transaction ${item.order_rate_txt} profit<br>
								chaque ensemble de données s’est le plus amélioroé ${item.order_num} apps<br>
								Réinitialiser le d’activation ${item.price} IDR</b></p>`;	
								let str7 = `<p><b>per transazione ${item.order_rate_txt} profitto<br>
								Ciascun set di dati è migliorato maggiormente ${item.order_num} applicazioni<br>
								Reimposta lo yen di attivazione ${item.price} IDR</b></p>`;
									let str8 = `<p><b>İşlem başına ${item.order_rate_txt} kar<br>
											Her veri kümesi ${item.order_num} kadar uygulamayı iyileştirir<br>
											Etkinleştirmeyi sıfırla IDR ${item.price} </b></p>`;
		// 					let str9 = `<p><b>Membayar ${item.order_rate_txt}<br>
  // Veri kümesi ${item.order_num} kadar yang dapat diterima<br>
  // Silakan coba ${item.price} </b></p>`;
						let str9 = `ISI ULANG ${Math.round(item.price).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} IDR <br> KEUNTUNGAN ${item.order_rate_txt}`;
						if(this.vuex_lang=='en'){
							item.node = str1;
						}else if(this.vuex_lang=='vi-VN'){
							item.node = str2;
						}else if(this.vuex_lang=='hy'){
							item.node = str4;
						}else if(this.vuex_lang=='jp'){
							item.node = str5;
						}else if(this.vuex_lang=='fr'){
							item.node = str6;
						}else if(this.vuex_lang=='yi'){
							item.node = str7;
						}else if(this.vuex_lang=='trq'){
							item.node = str8;
						}else if(this.vuex_lang=='yn'){
							item.node = str9;
						}
						else{
							item.node = str3
						}
						if(this.userInfo.level_id == item.id){
							this.currentLev = item;
							this.currentIndex = index;
						}
					})
					res.data.vip_list = levList;
					this.homeData = res.data;
					if(locyv=='zh-Hant') {locyv='zh'}
					this.homeData.config.pop=res.data.config.pop[locyv]
					
					if(this.vuex_index_pop&&this.homeData.config.pop!=''){
						this.showPop = true;
					}
				})
			},
			/* 打开客服 */
			async openServe() {
				let {data} = await this.$u.api.serverList();
				let action = data.map(item=>item.name);
				uni.showActionSheet({
					itemList: action,
					success: function(res) {
						let url = data[res.tapIndex].val;
						// #ifdef APP-PLUS
						plus.runtime.openURL(url)
						// #endif
						// #ifdef H5
						window.open(url)
						// #endif
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			goLevelDesc(){
				this.$u.route('/pages/levelList/levelList')
			},
			closePop() {
				this.showPop = false;
			},
			jumpMenu(i){
				// debugger
				if(i==0){
					this.$u.route({
						type:'switchTab',
						url: '/pages/tabbar/begin/begin',
					})
				}
				let	lans='zh'
				if(this.vuex_lang=='en'){
						lans = 'en';
				}else if(this.vuex_lang=='hy'){
					lans = 'hy';
				}else if(this.vuex_lang=='jp'){
					lans = 'jp';
				}else if(this.vuex_lang=='fr'){
					lans = 'fr';
				}else if(this.vuex_lang=='trq'){
					lans = 'trq';
				}else if(this.vuex_lang=='yn'){
					lans = 'yn';
				}
				if(i==1){
					let cert;
					cert = encodeURIComponent(JSON.stringify(this.homeData.config.cert[lans]))
					this.$u.route('/pages/richText/richText',{cert})
				}
				if(i==2){
					this.$u.route('/pages/withdraw/withdraw')
				}
				if(i==3){
					this.$u.route('/pages/deposit/deposit')
				}
				if(i>=4){
					this.typTitle = this.navList[i].text;
					if(i==4){
						this.popRichtxt = this.homeData.config.rule[lans];
					}
					if(i==5){
						let str = "",imgList=[];
						imgList = this.homeData.config.event_list[lans];
						imgList.map(item=>{
							str += `<img src="${item}" style="max-width:100%;border:0">`
						})
						this.popRichtxt = str;
					}
					if(i==6){
						
						this.popRichtxt = this.homeData.config.intro[lans];
					}
					if(i==7){
						
						console.log(this.homeData.config.about_us[lans])
						this.popRichtxt = this.homeData.config.about_us[lans];
					}
					this.showContentPop = true;
				}
			}
		}
	}
</script>
<style>
	page{
			color: #fff;
			font-family: PingFangSC-Medium;
			background-image: url('/static/images/common/BG-020.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			min-height: 100vh;
			background-attachment: fixed;
		}
	</style>
	<style lang="scss" scoped>
		.content {
			// background-image: url('/static/images/common/BG-020.png');
			// background-size: 100% auto;
			// background-repeat: no-repeat;
			color: #fff;
			height: 100%;
		}
</style>
<style lang="scss" scoped>
	.content {
		color: #fff;
		height: 100%;
	}
	.scroll-Y {
			height: 300rpx;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			
			width: 90rpx;
			height: 120rpx;
			// line-height: 90rpx;
			margin:20rpx  10rpx  10rpx  10rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-border{
			border-radius: 50%;
			height:60rpx;
			margin: 15rpx 15rpx;
			line-height: 60rpx;
			color:#000;
			background-color: #9f9f9f;
		}
		.scroll-border2{
			
			// height:40rpx;
			// weight:40rpx;
			// line-height: 40rpx;
			color:#000;
			margin-bottom: 5px;
			margin-top: -10rpx;
			
		}
		.uni-bg-red{
			background-color: #04bd76;
			// margin-right:10rpx;
			margin-right: 10rpx;
			border-radius: 10%;
		}
		.uni-bg-red2{
			background-color:#d9d9d9;
			margin-right: 10rpx;
			border-radius: 10%;
		}
	.mes-icon {
		width: 20px;
		height: 20px;
	}

	.welcome {
		position: relative;

		.level-icon {
			width: 26px;
			height: 26px;
		}

		.server {
			position: absolute;
			top: 15px;
			right: 25px;
		}
	}

	.vajra-box {
		.va-item {
			width: 23.5%;
			margin-right: 2%;
			text-align: center;

			image {
				width: 30px;
				height: 30px;
				background-color: #fff;
				border-radius: 50%;
				padding: 15px;
			}
			&:nth-child(4n){
				margin-right: 0;
			}
		}
	}
	
	.level-box{
		color: #333;
		background-color: #fff;
		border-radius: 12px;
		.level-img{
			image{
				width: 65px;
				height: 65px;
				border-radius: 12px;
			}
			.border-main-color{
				border: 2px solid #ffbeae;
			}
		}
		.level-content{
			.title{
				color: #52006B;
			}
		}
	}

	.pop-box{
		background-color: #1e2d4b;
		color: #9f9f9f;
		width: 345px;
		// box-shadow: 0 4px 4px 4px rgb(255 217 217 / 15%);
		padding-top: 30px;
		.pop-title{
			color:#85B3FF;
		}
		.pop-type{
			color:#fff
		}
	}
	
	.mask-pop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		color: #fff;
		background: rgba(0, 0, 0, .4);
		left: 0;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;

		.pop-cont {
			max-width: 80vw;
			position: relative;

			.img {
				height: 400px;
				max-width: 80vw;
				border-radius: 10px;
			}

			.close {
				position: absolute !important;
				top: -10px;
				right: -10px;
				width: 26px;
				height: 26px;
			}
		}
	}
	@media screen and (min-width: 376px) and (max-width: 800px) {
		.content {
			zoom: 1.05 !important;
		}
	
	}
</style>
